<template>
    <div class="org-navigator">
        <!-- 导航项 -->
        <div class="navigator-item" v-for="(item, index) in navItems" :key="index">
            <div class="navigator-title" @click="toggleSubmenu(index)">
                <span>{{ item.title }}</span>
                <span v-if="item.subItems" class="toggle-icon">
                    {{ expandedIndex === index ? '-' : '+' }}
                </span>
            </div>
            <!-- 子菜单 -->
            <div v-if="item.subItems && expandedIndex === index" class="submenu">
                <RouterLink v-for="(subItem, subIndex) in item.subItems" :key="subIndex" :to="subItem.path"
                    class="submenu-item">
                    {{ subItem.label }}
                </RouterLink>
            </div>
        </div>
        <!-- 撤销组织账号按钮 -->
        <div class="revoke-org-btn">
            <el-button type="danger" @click="revokeOrgAccount" style="width:100%;">撤销组织账号</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

// 导航数据
const navItems = [
    {
        title: '账号详情',
        subItems: [
            { label: '修改密码', path: '/change-password' },
            { label: '修改组织信息', path: '/edit-profile' },
        ]
    },
    {
        title: '活动管理',
        subItems: [
            { label: '活动列表', path: '/activitylist' },
            { label: '活动创建', path: '/activitycreate' },
        ]
    },
    {
        title: '组织管理',
        subItems: [
            { label: '组织档案袋', path: '/organization-file' },
            { label: '设置学生干部', path: '/set-student-cadre' },
            { label: '删除成员', path: '/deletestu' },
        ]
    },
    {
        title: '公告',
        subItems: [
            { label: '发布公告', path: '/release-notice' },
            { label: '公告列表', path: '/notice-list' },
            { label: '查询管理员公告', path: '/searchadminnotice' },
        ]
    },
    {
        title: '查询',
        subItems: [
            { label: '查询学生组织', path: '/searchstuorg' },
            { label: '查询管理员', path: '/searchadmin' },
        ]
    }
];

// 当前展开的导航项索引
const expandedIndex = ref(null);

// 切换子菜单显示/隐藏
const toggleSubmenu = (index) => {
    expandedIndex.value = expandedIndex.value === index ? null : index;
};

// 撤销组织账号
const router = useRouter();
const orgId = localStorage.getItem('orgId');
const revokeOrgAccount = () => {
    ElMessageBox.confirm(
        '撤销后该组织账号将无法登录，确定要撤销吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        try {
            const res = await axios.delete(`http://localhost:8080/orgs/${orgId}`);
            if (res.data && res.data.code === 200) {
                ElMessage.success('组织账号已撤销');
                // 可根据实际情况跳转到登录页或首页
                router.push('/login');
            } else {
                ElMessage.error(res.data.msg || '撤销失败');
            }
        } catch (e) {
            ElMessage.error('撤销失败');
        }
    }).catch(() => {});
};
</script>

<style scoped>
.org-navigator {
    width: 200px;
    height: 100vh;
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.navigator-item {
    margin-bottom: 10px;
    cursor: pointer;
}

.navigator-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.navigator-title:hover {
    background-color: #f1f1f1;
}

.toggle-icon {
    font-weight: bold;
}

.submenu {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding-left: 15px;
}

.submenu-item {
    display: block;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.3s;
    text-decoration: none;
    color: inherit;
}

.submenu-item:hover {
    background-color: #e9ecef;
}

.revoke-org-btn {
    margin-top: auto;
    padding: 10px 0 0 0;
}
</style>